<template>
	<div>
		<el-dialog v-model="dialogVisible" destroy-on-close title="用户登录" width="30%" @close="closeDialog" :close-on-click-modal="false" :close-on-press-escape="false" :align-center="true">
			<div class="user-info">
				<el-row>
					<el-col :span="5">
						<div class="user-phone">账号：</div>
					</el-col>
					<el-col :span="19">
						<el-input v-model="username" class="user-input-phone" placeholder="请输入手机号" clearable />
					</el-col>
				</el-row>

				<el-row class="password">
					<el-col :span="5">
						<div class="user-phone">密码：</div>
					</el-col>
					<el-col :span="19">
						<el-input v-model="password" type="password" class="user-input-phone" placeholder="请输入密码" clearable />
					</el-col>
				</el-row>

				<div class="user-login">
					<el-button type="normal" size="large" style="width: 100px" @click="closeDialog">取消</el-button>
					<el-button type="primary" size="large" @click="handleLogin" style="margin-left: 40px; width: 100px">登录</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup name="userLoginDialog">
import { ref, defineEmits } from "vue";
import { ElMessage } from "element-plus";
const dialogVisible = ref(true);
const username = ref("");
const password = ref("");
const emit = defineEmits(["close-dialog", "login"]);
function closeDialog() {
	emit("close-dialog");
}
function handleLogin() {
	if (!username.value.trim()) {
		ElMessage("请输入手机号");
		return;
	}
	if (!password.value.trim()) {
		ElMessage("请输入密码");
		return;
	}
	emit("login", {
		username: username.value,
		password: password.value,
	});
}
</script>

<style lang="scss" scoped>
// 解决登录框自动填充账号密码背景色
:deep(.user-info .el-input__inner:-webkit-autofill) {
	background-color: #ffffff !important; /*在这里换成你想要的颜色*/
	transition: background-color 5000s ease-in-out 0s !important;
}
:deep(.password .el-input__inner:-webkit-autofill) {
	background-color: #ffffff !important; /*在这里换成你想要的颜色*/
	transition: background-color 5000s ease-in-out 0s !important;
}
.user-info {
	display: flex;
	flex-direction: column;
	height: 200px;
	.user-phone {
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中，如果需要的话 */
		font-size: 18px;
		width: 100%;
		height: 45px;
	}
	.user-input-phone {
		width: 100%;
		height: 45px;
	}
	.password {
		margin-top: 10px;
	}
	.user-login {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 25px;
		align-items: center;
		width: 100%;
		height: 100%;
		align-items: center;
		flex-grow: 1;
	}
}
</style>
